{% extends 'base.html' %}
    {% block title %}
        首页
    {% endblock %}
    {% block linkFiles %}
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
        img{
            width:129px;
            height:295px;
            /* position:absolute;
            top:0;
            left:0; */
        }
        </style>
    {% endblock %}

{% block content %}
    <img src="https://www.shijie.center/dong.gif" alt=""/>
{% endblock %}
{% block jsFiles %}
    <script>
        {#var img =document.querySelector('img');#}
        {#var num=0;  //移动的距离，下一行同理；#}
        {#var num1=0;#}
        {#var flg=true;   //设置一个变量，配合三元表达式使用，实现折返的效果，下一行同理；#}
        {#var flg1=true;#}
        {##}
        {#(function fun(){#}
        {#    zuo = document.documentElement.clientWidth-129;#}
        {#    shang = document.documentElement.clientHeight-295;#}
        {#    setTimeout(fun,10)#}
        {#    //判断让其上下移动#}
        {#    if(num<=0){flg=true;num=0}#}
        {#    if(num>=shang){flg=false;num=shang}#}
        {#    flg?num+=2:num-=2;#}
        {#    //判断让其左右移动#}
        {#    if(num1<=0){flg1=true;num1=0}#}
        {#    if(num1>=zuo){flg1=false;num1=zuo}#}
        {#    flg1?num1+=2:num1-=2;#}
        {#    img.style.marginTop=num+'px';#}
        {#    img.style.marginLeft=num1+'px';#}
    </script>
{% endblock %}